import React from 'react'
import Styles from './index.less'
export default function CrossDisplay(props) {
    return (
        <div className={Styles.CrossDisplay}>
            { props.main.map((item) => (<div data-role="CrossDisplayItem" key={item.name} style={{backgroundImage: `url(${item.pic})`}}>
                <div data-role="CrossDisplayItemContainer">
                    <div data-role="CrossDisplayItemContent">
                        <h4 data-role="CrossDisplayItemTitle">{item.name}</h4>
                        { item.detail.map((item) => (<div data-role="CrossDisplayItemMain" key={item}>{item}</div>)) }
                        <div data-role="abbreviateMain">{item.detail[0].slice(0, -1) + '...'}</div>
                        <div data-role="abbreviateMainSmall">{item.detail[0].length > 60 ? `${item.detail[0].slice(0, 60)}...` : `${item.detail[0].slice(0, -1)}...`}</div>
                        <div data-role="learnMoreBtn">了解详情<svg t="1540869036204" viewBox="0 0 1024 1024" version="1.1" p-id="1921" className={Styles.linkArrow}><defs><style type="text/css"></style></defs><path d="M439.62624 0 388.4608 51.16416 388.4608 51.16416 848.94976 511.64288 388.4608 972.13568 439.62624 1023.30112 951.28064 511.64288Z" p-id="1922"></path></svg></div>
                    </div>
                </div>
            </div>))}
        </div>
    )
}